<template>
  <div>
    <BasicModal
      @register="register"
      title="选择组织"
      width="800px"
      :destroyOnClose="true"
      :okText="`确定选择(${targetKeys.length})`"
      :okButtonProps="{
        disabled: !targetKeys.length,
      }"
      @ok="handleOk"
    >
      <Transfer
        v-model:target-keys="targetKeys"
        :data-source="dataList"
        show-search
        :list-style="{
          width: '50%',
          height: '480px',
        }"
        :selectAllLabels="[
          ({ selectedCount, totalCount }) =>
            h('div', { class: 'flex justify-between w-[300px]' }, [
              h('div', '组织列表'),
              h('div', selectedCount + '/' + totalCount),
            ]),
          ({ selectedCount, totalCount }) =>
            h('div', { class: 'flex justify-between w-[300px]' }, [
              h('div', '已选列表'),
              h('div', selectedCount + '/' + totalCount),
            ]),
        ]"
        :filter-option="(inputValue, item) => item.orgName.indexOf(inputValue) !== -1"
      >
        <template #render="item">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <Image
                :src="item.orgLogo"
                width="24px"
                height="24px"
                style="object-fit: cover"
              ></Image>
            </div>

            <div class="pl-2">{{ item.orgName }}</div>
          </div>
        </template>
      </Transfer>
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { h, ref, unref } from 'vue';
  import { Transfer, Image } from 'ant-design-vue';
  import { MerchantListType } from '@/enums/resourceLeague';
  import { orgBoManagerList } from '@/api/institution/businessOpportunitiesManage';

  const emit = defineEmits(['register', 'ok']);

  const props = defineProps({
    boInfoId: Number,
  });

  const disabledIds = ref<string[]>([]); // 已选择列表,再次打开弹窗,禁用
  const [register, { closeModal }] = useModalInner(
    (data: { type: MerchantListType; disabledIds: number[] }) => {
      targetKeys.value = [];
      disabledIds.value = data.disabledIds.map((v) => String(v));
      getList();
    },
  );

  const dataList = ref<any[]>([]);
  function getList() {
    orgBoManagerList({ current: 1, size: 9999, joinFlag: 1, boInfoId: props.boInfoId }).then(
      (res) => {
        dataList.value = res.records.map((v) => {
          return {
            key: String(v.tenantId),
            disabled: disabledIds.value.includes(String(v.tenantId)), // 已选择过的,回显时禁用
            ...v,
          };
        });
      },
    );
  }

  // 已选组织
  const targetKeys = ref<string[]>([]);
  function handleOk() {
    let selectedList = dataList.value.filter((v) => unref(targetKeys).includes(v.key));
    console.log(selectedList, '已选列表');
    emit('ok', selectedList);
    closeModal();
  }
</script>

<style lang="less" scoped></style>
